<template>
	<div>
		<div class="user_balance_pc">
			<div class="overFlow_routerBox_warper">
				<div class="balancePage">
					<div class="balance_pc_titleBox">
						<p class="balance_pc_balanceText">
							{{ $t("profile.BackAccount") }}
						</p>
						<div class="balance_pc_cashbackBox">
							<div class="balance_pc_cashback">
								<p class="balance_pc_currentText">
									{{ $t("profile.CurrentCash") }}
								</p>
								<div class="balance_pc_priceBox">
									<div class="balance_pc_priceBox-item">
										<p class="balance_pc_txt_01">
											{{ $t("confirmemail.coin") }}{{ userinfo.cashBackBalance }}
										</p>
										<p class="balance_pc_txt_02">
											{{ $t("profile.AccountBalance") }}
										</p>
									</div>
									<div class="balance_pc_priceBox-item">
										<p class="balance_pc_txt_01" style="color: #ff5900">
											{{ $t("confirmemail.coin") }} {{ userinfo.payableAmount }}
										</p>
										<p class="balance_pc_txt_02">{{ $t("profile.Payable") }}</p>
									</div>
									<div class="balance_pc_priceBox-item">
										<p class="balance_pc_txt_01">
											{{ $t("confirmemail.coin") }}{{ userinfo.pendingAmount }}
										</p>
										<p class="balance_pc_txt_02">
											{{ $t("profile.Pending") }}
											<i @mouseenter="btnFirstChange3" @mouseleave="btnFirstChange4"
												class="reward-icon">
												<div @mouseenter="btnFirstChange3" @mouseleave="btnFirstChange4"
													v-show="IsbtnFirstChange3" class="reward-icon-text244"></div>

												<span @mouseenter="btnFirstChange3" @mouseleave="btnFirstChange4"
													v-show="IsbtnFirstChange3" class="reward-icon-text special-tip">
													<span>
														{{$t('confirmemail.balanceAllShow01')}}
													</span><br> 2. <a style="color:orange"
														href="#">{{$t('confirmemail.balanceAllShow02')}}</a>

												</span>

											</i>
										</p>
									</div>
								</div>
								<div class="balance_pc_priceBox_bottom" :class="
                    userinfo.payableAmount > 0
                      ? 'balance_pc_priceBox_bottom_active'
                      : ''
                  " @click="showPaymentBoxHandler">
									{{ $t("profile.Payment") }}
								</div>
								<p class="balance_pc_priceBox_bottom_p">
									{{ $t("profile.why") }}
								</p>
							</div>
							<div class="balance_pc_point_warper">
								<p class="balance_pc_pointText_p">{{ $t("profile.points") }}</p>
								<br />
								{{ $t("profile.balanceis") }}
								<span class="balance_pc_redTxt">{{
                  userinfo.pointsBalance
                }}</span>
								|
								<a>
									<a class="balance_pc_learnTxt" @click="rewardPointsChange">{{
                    $t("profile.learnmore")
                  }}</a></a>
							</div>
						</div>
					</div>
					<div class="balance_pc_historyBox">
						<p class="balance_pc_historyBox__txt">
							{{ $t("profile.TransactionsHistory") }}
						</p>
						<div class="balance_pc_historyBox-btnBox">
							<span @click="withdrawalChange(1)" :class="{ balance_pc_btnHover: balanceIsShow}"
								class="balance_pc_btn">{{ $t("profile.Cashback") }}</span>
							<span @click="AllChange(2)" :class="{ balance_pc_btnHover: !balanceIsShow }"
								class="balance_pc_btn">{{ $t("profile.Withdrawal") }}</span>
						</div>
					</div>


					<div v-show="ChangeBtnCas">
						<div class="balance_pc_stepPriceBox">
							<span @click="AllpayableChange(1)" :class="{ payableIsShow: 1 === isShowNum }"
								class="balance_pc_commonBtn">{{ $t("profile.All") }}
							</span>
							<span @click="AllpayableChange(2)" :class="{ payableIsShow: 2 === isShowNum }"
								class="balance_pc_commonBtn">
								{{ $t("profile.Payable") }}({{ $t("confirmemail.coin") }}{{ userinfo.cashBackBalance }})
							</span>
							<span @click="AllpayableChange(3)" :class="{ payableIsShow: 3 === isShowNum }"
								class="balance_pc_commonBtn">
								{{ $t("profile.Pending") }}({{ $t("confirmemail.coin") }}{{ userinfo.pendingAmount }})
							</span>
							<span @click="AllpayableChange(4)" :class="{ payableIsShow: 4 === isShowNum }"
								class="balance_pc_commonBtn">
								{{ $t("profile.Closed") }}({{ $t("confirmemail.coin") }}{{ userinfo.closeAmount }})
							</span>
						</div>

						<div class="balance_pc_reasonListBox">
							<div class="balance_pc_typeBox">
								<span @click="campaignChange(5)" :class="{ payableIsShow: 5 === campaignNum }"
									v-show="!balanceIsShow" class="balance_pc_commonBtn">
									{{ $t("profile.All") }}
								</span>
								<span @click="campaignChange(6)" v-show="!balanceIsShow"
									:class="{ payableIsShow: 6 === campaignNum }"
									class="balance_pc_commonBtn balance_pc_btnActive">{{ $t("profile.Order") }}
								</span>
								<span @click="campaignChange(7)" v-show="!balanceIsShow"
									:class="{ payableIsShow: 7 === campaignNum }"
									class="balance_pc_commonBtn">{{ $t("profile.Referral") }}
								</span>
								<span @click="campaignChange(8)" v-show="!balanceIsShow"
									:class="{ payableIsShow: 8 === campaignNum }"
									class="balance_pc_commonBtn">{{ $t("profile.Campaign") }}
								</span>
								<!-- 时间element-UI -->
								<div class="block">
									<!-- <span class="demonstration">带快捷选项</span> -->
									<el-date-picker style="
                    width: 280px;
                    height: 32px;
                    border-radius: 0px;
                    position: relative;
                    top: 2px;
                  " v-model="value2" type="daterange" align="right" unlink-panels range-separator="to"
										start-placeholder="Start Date " end-placeholder="End Date"
										name="height:280px;width:32px;font-size: 13px;" :picker-options="pickerOptions"
										@change="UpdateDate">
									</el-date-picker>
								</div>
								<span @click="AllpayableChange(5)" class="balance_pc_searchBtn">{{
                $t("profile.Search")
              }}</span>
							</div>
						</div>

						<div class="balance_pc_titleBox_List_bottom_warper">
							<div class="balance_pc_titleBox_List_bottom">
								<!-- <div class="balance_pc_titleBox_29l45"> -->
								<span class="balance_pc_title1">{{ $t("profile.Amount") }}</span>
								<span class="balance_pc_title2">{{ $t("profile.Reason") }}</span>
								<span class="balance_pc_title3">{{ $t("profile.Date") }}</span>
								<span class="balance_pc_title4">{{ $t("profile.Status") }}</span>
								<!-- </div> -->
							</div>
							<!-- v-for="(item , index ) in 0" :key="index" -->
							<div v-for="(item, index) in shopRecords" :key="index" class="balance_pc_itemBox">
								<span class="balance_pc_itemTxt1"><span v-if="item.status == 1">-</span><span
										v-else>+</span> {{ $t("confirmemail.coin") }}{{
                  item.amount
                }}
								</span>
								<span class="balance_pc_itemTxt2">
									<span class="el-tooltip item balance_pc_moreText" aria-describedby="el-tooltip-765"
										tabindex="0">
										{{ item.reason }}</span>
								</span>
								<span class="balance_pc_itemTxt3"> {{ item.createdTime }} </span>
								<span v-if="item.status == 1" class="balance_pc_itemTxt4">
									{{ $t("confirmemail.closed") }}
								</span>
								<span v-else-if="item.status == 2" class="balance_pc_itemTxt4">
									{{ $t("confirmemail.Pending") }}
								</span>
								<span v-else class="balance_pc_itemTxt4"> {{ $t("confirmemail.Payable") }} </span>
							</div>
						</div>

						<div class="common-page-box">
							<van-icon class-prefix="iconfont" @click="Lastpage" size="1.55rem" name="yuanjiantou1"
								:color="dataAll01.current > 1 ? '#50be8d' : ''" />
							<span class="common-page-box-num">{{ dataAll01.current }}</span>
							<van-icon class-prefix="iconfont" @click="Nextpage" size="1.55rem" name="yuanjiantou1-copy"
								:color="dataAll01.current < TotalPage ? '#50be8d' : ''" />
						</div>
					</div>

					<div v-show="!ChangeBtnCas">
						<div class="balance_pc_stepPriceBox">
							<span @click="AllpayableChange(6)" :class="{ payableIsShow: 6 === isShowNum }"
								class="balance_pc_commonBtn">{{ $t("profile.All") }}
							</span>
							<span @click="AllpayableChange(7)" :class="{ payableIsShow: 7 === isShowNum }"
								class="balance_pc_commonBtn">
								{{ $t("balance.pat1") }}
							</span>
							<span @click="AllpayableChange(8)" :class="{ payableIsShow: 8 === isShowNum }"
								class="balance_pc_commonBtn">
								{{ $t("balance.pay2") }}
							</span>
							<span @click="AllpayableChange(9)" :class="{ payableIsShow: 9 === isShowNum }"
								class="balance_pc_commonBtn">
								{{ $t("balance.pay3") }}
							</span>
						</div>

						<div class="balance_pc_reasonListBox">
							<div class="balance_pc_typeBox">
								<span @click="campaignChange(5)" :class="{ payableIsShow: 5 === campaignNum }"
									v-show="!balanceIsShow" class="balance_pc_commonBtn">
									{{ $t("profile.All") }}
								</span>
								<span @click="campaignChange(6)" v-show="!balanceIsShow"
									:class="{ payableIsShow: 6 === campaignNum }"
									class="balance_pc_commonBtn balance_pc_btnActive">{{ $t("profile.Order") }}
								</span>
								<span @click="campaignChange(7)" v-show="!balanceIsShow"
									:class="{ payableIsShow: 7 === campaignNum }"
									class="balance_pc_commonBtn">{{ $t("profile.Referral") }}
								</span>
								<span @click="campaignChange(8)" v-show="!balanceIsShow"
									:class="{ payableIsShow: 8 === campaignNum }"
									class="balance_pc_commonBtn">{{ $t("profile.Campaign") }}
								</span>
								<!-- 时间element-UI -->
								<div class="block">
									<!-- <span class="demonstration">带快捷选项</span> -->
									<el-date-picker style="
                    width: 280px;
                    height: 32px;
                    border-radius: 0px;
                    position: relative;
                    top: 2px;
                  " v-model="value2" type="daterange" align="right" unlink-panels range-separator="to"
										start-placeholder="Start Date " end-placeholder="End Date"
										name="height:280px;width:32px;font-size: 13px;" :picker-options="pickerOptions"
										@change="UpdateDate">
									</el-date-picker>
								</div>
								<span @click="AllpayableChange(5)" class="balance_pc_searchBtn">{{
                $t("profile.Search")
              }}</span>
							</div>
						</div>

						<div class="balance_pc_titleBox_List_bottom_warper">
							<div class="balance_pc_titleBox_List_bottom">
								<!-- <div class="balance_pc_titleBox_29l45"> -->
								<span class="balance_pc_title1"> {{ $t("balance.pay4") }}</span>
								<span class="balance_pc_title2">{{ $t("balance.pay5") }}</span>
								<span style="flex:1" class="balance_pc_title3">{{ $t("balance.pay6") }}</span>
								<span style="flex:1" class="balance_pc_title4">{{ $t("balance.pay7") }}</span>
								<span class="balance_pc_title4">{{ $t("balance.pay8") }}</span>
								<!-- </div> -->
							</div>
							<!-- v-for="(item , index ) in 0" :key="index" -->
							<div v-for="(item, index) in shopRecords" :key="index" class="balance_pc_itemBox">
								<span class="balance_pc_itemTxt1">{{
                  item.id
                }}
								</span>
								<span class="balance_pc_itemTxt2">
									<span class="el-tooltip item balance_pc_moreText" aria-describedby="el-tooltip-765"
										tabindex="0">
										<span v-if="item.status == 1">-</span><span v-else>+</span>
										{{ $t("confirmemail.coin") }} {{ item.amount }}</span>
								</span>
								<a v-if="item.screenshot" target="_blank"
									:href="'https://mottecommerce.com/' +  item.screenshot" style="flex:1;color:orange"
									class="balance_pc_itemTxt3">
									Open transfer screenshot
								</a>
								<span v-else style="flex:1;color:orange" class="balance_pc_itemTxt3">
									No transfer screenshot
								</span>
								<!-- <span class="balance_pc_itemTxt3"> {{ item.createdTime }} </span> -->
								<span style="flex:1" class="balance_pc_itemTxt4"> {{ item.createdTime }} </span>
								<span v-if="item.status == 1" class="balance_pc_itemTxt4">
									{{ $t("confirmemail.Applying") }}
								</span>
								<span v-else-if="item.status == 2" class="balance_pc_itemTxt4">
									{{ $t("confirmemail.Applying") }}
								</span>
								<span v-else-if="item.status == 3" class="balance_pc_itemTxt4">
									<!-- {{ $t("confirmemail.Payable") }}3333 -->
									{{ $t("confirmemail.Payable") }}
								</span>
								<span v-else class="balance_pc_itemTxt4"> {{ $t("confirmemail.closed") }}</span>
							</div>
						</div>

						<div class="common-page-box">
							<van-icon class-prefix="iconfont" @click="Lastpage01" size="1.55rem" name="yuanjiantou1"
								:color="dataAll01.current > 1 ? '#50be8d' : ''" />
							<span class="common-page-box-num">{{ dataAll01.current }}</span>
							<van-icon class-prefix="iconfont" @click="Nextpage01" size="1.55rem"
								name="yuanjiantou1-copy" :color="dataAll01.current < TotalPage ? '#50be8d' : ''" />
						</div>
					</div>





				</div>
			</div>
		</div>

		<!-- 移动端 -->
		<div class="user_balance_iphone">
			<!-- 日期 -->
			<van-calendar @select='vantcalenderChange' :min-date="minDate" :max-date="maxDate" v-model="show"
				type="range" @confirm="onConfirm" />

			<div class="mainPageWarper">
				<div class="balance">
					<div class="main-content02">
						<div class="balance-content">
							<div class="cash-first">
								<ul class="cash-first-ul">
									<li class="cash-first-li common-border-bottom common-li-style">
										{{ $t("confirmemail.MyAccount01") }}
									</li>
									<li class="cash-second-li common-li-style common-text common-border-bottom">
										{{ $t("confirmemail.Current") }}
									</li>
									<li class="cash-third-li common-li-style common-text common-border-bottom">
										<span class="first-span">{{ $t("confirmemail.AccountBalance") }}</span>
										<span style="font-size: 0.6rem" class="second-span">
											{{ $t("confirmemail.coin") }}{{ userinfo.cashBackBalance }}
										</span>
									</li>
									<li class="cash-four-li common-li-style common-border-bottom common-text">
										<span class="first-span">{{ $t("confirmemail.Payable") }}</span>
										<span style="font-size: 0.6rem"
											class="second-span change-color">{{ $t("confirmemail.coin") }}{{ userinfo.payableAmount }}
										</span>
									</li>
									<li class="cash-five-li common-text common-border-bottom common-li-style">
										<span class="first-span">
											{{ $t("confirmemail.Pending") }}
											<i style="" @click="btnFirstChange" class="reward-icon">
												<div v-show="IsbtnFirstChange" class="reward-icon-text233"></div>
												<span v-show="IsbtnFirstChange" class="reward-icon-text special-tip"
													style="display: none;margin-left:2rem">
													<span>
														{{ $t("balance.text") }}
													</span>
													2. <a> {{ $t("balance.Commission") }}</a>
												</span>
											</i>
										</span>
										<span style="font-size: 0.6rem" class="second-span">
											{{ $t("confirmemail.coin") }}{{ userinfo.pendingAmount }}
										</span>
									</li>
									<li class="cash-six-li clear">
										<div class="request " :class="
                    userinfo.payableAmount > 0
                      ? 'balance_pc_priceBox_bottom_active'
                      : ''
                  " @click="showPaymentBoxHandler"> {{ $t("confirmemail.RequestPayment") }}</div>
										<p class="second-span"> {{ $t("confirmemail.requestapayment") }}</p>
									</li>
								</ul>
							</div>

							<div class="pending-order">
								<h2 class="pending-title">
									{{ $t("confirmemail.ReferralBonus") }}
									<i @click="btnFirstChange2" class="reward-icon">
										<div v-show="IsbtnFirstChange2" class="reward-icon-text233"></div>
										<span @click.once="btnFirstChange2" style="font-size: 0.7rem"
											v-show="IsbtnFirstChange2" class="reward-icon-text">
											{{ $t("balance.tetx23") }}
										</span>
									</i>
								</h2>
								<div class="pending-table-flex">
									<div class="table-header bonus-table clear">
										<div class="table-header-item"> {{ $t("confirmemail.No") }}</div>
										<div class="table-header-item"> {{ $t("confirmemail.Name") }}</div>
										<div class="table-header-item"> {{ $t("confirmemail.PurchaseDate") }}</div>
										<div class="table-header-item"> {{ $t("confirmemail.Bonus") }}</div>
									</div>
									<div class="bonus-list">
										<div class="bonus-list-item"></div>
									</div>
								</div>
							</div>

							<div class="pending-order">
								<h2 class="pending-title">
									{{ $t("confirmemail.Commissioin") }} <span>{{ $t("confirmemail.MyReferee") }}</span>
								</h2>
								<div class="pending-table-flex">
									<div class="flex-header">
										<div class="table-header-item">
											{{ $t("confirmemail.Order") }} <br />
											{{ $t("confirmemail.No") }}
										</div>
										<div class="table-header-item">
											{{ $t("confirmemail.Purchase") }} <br />
											{{ $t("confirmemail.Date") }}
										</div>
										<div class="table-header-item">
											{{ $t("confirmemail.Order") }} <br />
											{{ $t("confirmemail.Status") }}
										</div>
										<div class="table-header-item">
											{{ $t("confirmemail.Order") }} <br />
											{{ $t("confirmemail.Comm") }}
										</div>
										<div class="table-header-item">
											{{ $t("confirmemail.Order") }} <br />
											{{ $t("confirmemail.Comm") }}
										</div>
									</div>
									<div class="table-list">
										<div class="table-list-item"></div>
									</div>
								</div>
							</div>

							<div class="cash-second clear">
								<p> {{ $t("confirmemail.TransactionsHistory") }}</p>
								<div class="date-icon">
									<!-- <van-cell  /> -->
									<img @click="show = true"
										src=""
										alt="" />
								</div>
								<div class="cut-tab">
									<span :class="{ spanactive: 1 === numCas }" @click="CashbackChange1(1)">
										{{ $t("confirmemail.Cashback") }}
									</span>
									<span :class="{ spanactive: 2 === numCas }" @click="CashbackChange2(2)">
										{{ $t("confirmemail.Withdrawal") }}
									</span>
								</div>
							</div>

							<div v-show="phonewit">
								<div class="cash-third clear">


									<span v-if="IFTab == 1" class="left">{{ $t("confirmemail.All") }}</span>
									<span v-else-if="IFTab == 2" class="left">{{ $t("confirmemail.Payable") }}</span>
									<span v-else-if="IFTab == 3" class="left">{{ $t("confirmemail.Pending") }}</span>
									<span v-else-if="IFTab == 4" class="left">{{ $t("confirmemail.closed") }}</span>



									<div class="right common-text">
										<div class="select-box">
											<div class="select-content">
												<span @click="TransactionChnage()">
													{{ $t("confirmemail.TransactionStatus") }}</span>
												<i class="select-arrow van-icon van-icon-arrow">
													<!---->
												</i>
											</div>
											<ul v-show="isTransactionChnage" style="display: block" class="select-list">
												<li @click="AllpayableChange(1)"
													:class="{ payableIsShow: 1 === isShowNum }" class="active-status">
													{{ $t("confirmemail.All") }}
												</li>
												<li @click="AllpayableChange(2)"
													:class="{ payableIsShow: 2 === isShowNum }" class="">
													{{ $t("confirmemail.Payable") }}((${{ userinfo.cashBackBalance }}))
												</li>
												<li @click="AllpayableChange(3)"
													:class="{ payableIsShow: 3 === isShowNum }" class="">
													{{ $t("confirmemail.Pending") }}((${{ userinfo.pendingAmount }}))
												</li>
												<li @click="AllpayableChange(4)"
													:class="{ payableIsShow: 4 === isShowNum }" class="">
													{{ $t("confirmemail.closed") }}((${{ userinfo.closeAmount }}))
												</li>
											</ul>
										</div>
									</div>
								</div>

								<div v-show="isCashbackChange" style="display: block" class="search-list">
									<div class="search-box">
										<span @click="campaignChange(5)" :class="{ payableIsShow: 5 === campaignNum }"
											class="active-type">
											{{ $t("confirmemail.All") }}
										</span>
										<span @click="campaignChange(6)" :class="{ payableIsShow: 6 === campaignNum }"
											class="" style="">
											{{ $t("confirmemail.Order") }}
										</span>
										<span @click="campaignChange(7)" :class="{ payableIsShow: 7 === campaignNum }"
											class="" style="">
											{{ $t("confirmemail.Referral") }}
										</span>
										<span @click="campaignChange(8)" :class="{ payableIsShow: 8 === campaignNum }"
											class="" style="">
											{{ $t("confirmemail.Campaign") }}
										</span>
									</div>

									<ul class="cash-list">
										<li v-for="(item, index) in shopRecords" :key="index" class="order-box">
											<div class="balance-item">
												<div data-v-1c3aaf68="" class="order-left">
													<span data-v-1c3aaf68="" class="order-price"><span
															v-if="item.status == 1">-</span><span
															v-else>+</span>${{ item.amount }}</span>
												</div>
												<div data-v-1c3aaf68="" class="order-right">
													<p data-v-1c3aaf68="" class="title">
														{{ item.reason }}
													</p>
													<p data-v-1c3aaf68="" class="status">
														<span v-if="item.status == 1" class="balance_pc_itemTxt4">
															{{ $t("confirmemail.closed") }}
														</span>
														<span v-else-if="item.status == 2" class="balance_pc_itemTxt4">
															{{ $t("confirmemail.Pending") }}
														</span>
														<span v-else class="balance_pc_itemTxt4">
															{{ $t("confirmemail.Payable") }}

														</span>
													</p>
													<p data-v-1c3aaf68="" class="screenshot"
														style="color: rgb(255, 89, 0)"></p>
													<p data-v-1c3aaf68="" class="time">
														{{ item.createdTime }}
													</p>
												</div>
											</div>
										</li>
									</ul>
								</div>

								<!-- 切换条 -->
								<div class="common-page-box" v-show="isCashbackChange">
									<van-icon class-prefix="iconfont" @click="Lastpage" size="1.55rem"
										name="yuanjiantou1" :color="dataAll01.current > 1 ? '#50be8d' : ''" />
									<span class="common-page-box-num">{{ dataAll01.current }}</span>
									<van-icon class-prefix="iconfont" @click="Nextpage" size="1.55rem"
										name="yuanjiantou1-copy"
										:color="dataAll01.current < TotalPage ? '#50be8d' : ''" />
								</div>
							</div>

							<div v-show="!phonewit">
								<div class="cash-third clear">


									<span v-if="IFTab == 6" class="left">{{ $t("confirmemail.All") }}</span>
									<span v-else-if="IFTab == 7" class="left">{{ $t("balance.pat1") }}</span>
									<span v-else-if="IFTab == 8" class="left">{{ $t("balance.pay2") }}</span>
									<span v-else-if="IFTab == 9" class="left">{{ $t("balance.pay3") }}</span>



									<div class="right common-text">
										<div class="select-box">
											<div class="select-content">
												<span @click="TransactionChnage()">
													{{ $t("confirmemail.TransactionStatus") }}</span>
												<i class="select-arrow van-icon van-icon-arrow">
													<!---->
												</i>
											</div>
											<ul v-show="isTransactionChnage" style="display: block" class="select-list">
												<li @click="AllpayableChange(6)"
													:class="{ payableIsShow: 1 === isShowNum }" class="active-status">
													{{ $t("confirmemail.All") }}
												</li>
												<li @click="AllpayableChange(7)"
													:class="{ payableIsShow: 2 === isShowNum }" class="">
													{{ $t("balance.pat1") }}
												</li>
												<li @click="AllpayableChange(8)"
													:class="{ payableIsShow: 3 === isShowNum }" class="">
													{{ $t("balance.pay2") }}
												</li>
												<li @click="AllpayableChange(9)"
													:class="{ payableIsShow: 4 === isShowNum }" class="">
													{{ $t("balance.pay3") }}
												</li>
											</ul>
										</div>
									</div>
								</div>

								<div v-show="!isCashbackChange" style="display: block" class="search-list">

									<ul class="cash-list">
										<li v-for="(item, index) in shopRecords" :key="index" class="order-box">
											<div class="balance-item">
												<div data-v-1c3aaf68="" class="order-left">
													<span data-v-1c3aaf68="" class="order-price"><span
															v-if="item.status == 1">-</span><span
															v-else>+</span>${{ item.amount }}</span>
												</div>
												<div data-v-1c3aaf68="" class="order-right">
													<p data-v-1c3aaf68="" class="title">
														{{ item.reason }}
													</p>
													<p data-v-1c3aaf68="" class="status">
														<span v-if="item.status == 1" class="balance_pc_itemTxt4">
															{{ $t("confirmemail.Applying") }}
														</span>
														<span v-else-if="item.status == 2" class="balance_pc_itemTxt4">
															{{ $t("confirmemail.Applying") }}
														</span>
														<span v-else-if="item.status == 3" class="balance_pc_itemTxt4">
															<!-- {{ $t("confirmemail.Payable") }}3333 -->
															{{ $t("confirmemail.Payable") }}
														</span>
														<span v-else class="balance_pc_itemTxt4">
															{{ $t("confirmemail.closed") }}</span>
														<a v-if="item.screenshot" target="_blank"
															:href="'https://mottecommerce.com/' +  item.screenshot"
															style="color: rgb(255, 89, 0);display: block;"
															class="screenshot">
															Open transfer screenshot
														</a>
														<span v-else style="color: rgb(255, 89, 0);display: block;"
															class="screenshot">
															No transfer screenshot
														</span>
													</p>
													<p data-v-1c3aaf68="" class="time">
														{{ item.createdTime }}
													</p>
												</div>
											</div>
										</li>
									</ul>
								</div>

								<!-- 切换条 -->
								<div class="common-page-box" v-show="!isCashbackChange">
									<van-icon class-prefix="iconfont" @click="Lastpage01" size="1.55rem"
										name="yuanjiantou1" :color="dataAll01.current > 1 ? '#50be8d' : ''" />
									<span class="common-page-box-num">{{ dataAll01.current }}</span>
									<van-icon class-prefix="iconfont" @click="Nextpage01" size="1.55rem"
										name="yuanjiantou1-copy"
										:color="dataAll01.current < TotalPage ? '#50be8d' : ''" />
								</div>
							</div>


						</div>
					</div>
				</div>
			</div>
		</div>

		<van-popup v-model="showPaymentBox">
			<div class="commonDialogSlot_deletBox_1Tm2F">
				<div class="commonDialogSlot_deletIconBox_2ErC">
					<i @click="showPaymentBox = false"></i>
				</div>
				<div class="commonDialogSlot_content_1izEx">
					<span class="payable-title">{{$t('balance.Payable1')}} </span>
					<van-form>
						<van-cell-group style="margin-bottom: 10px" :title="$t('balance.Payable5')" border>
							<van-field v-model="userinfo.paypal" disabled />
						</van-cell-group>
						<div class="payable-title">{{$t('balance.Payable2')}}</div>
						<div class="payable-title">￥{{ userinfo.payableAmount }}</div>
						<van-field v-model="WithdrawalMoney" :placeholder="$t('balance.Payable4')" />
						<div class="apply-body-btn" @click="WithdrawHandler">{{$t('balance.Payable3')}}</div>
					</van-form>
				</div>
			</div>
		</van-popup>
		<van-popup v-model="showInvitation" class="showInvitation" style="background-color: transparent">
			<img src="../../assets/image/yaoqing.png" alt="" @click="goPage('/referral')" />
			<van-icon class-prefix="iconfont" class="clearicon" @click="showInvitation = false" size="1.2rem"
				color="#fff" name="guanbi" />
		</van-popup>
	</div>
</template>

<script>
	export default {
		name: "balance",
		data() {
			return {
				pickerOptions: {
					shortcuts: [{
							text: "Last Week",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "Last Month",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								picker.$emit("pick", [start, end]);
							},
						},
					],
				},
				value1: "",
				value2: "",

				// vant data
				date: "",
				show: false,
				numCas: 1,
				csahbackIsshow: 1,
				isTransactionChnage: false,
				isCashbackChange: true,
				IsbtnFirstChange: false,
				IsbtnFirstChange2: false,
				IsbtnFirstChange3: false,
				balanceIsShow: false,
				minDate: new Date(2021, 1, 1),
				maxDate: new Date(),
				// payableIsShow:true,
				isShowNum: 1,
				campaignNum: 5,
				IFTab: 1,

				shopRecords: null,
				dataAll01: {
					createdTimeStart: "",
					createdTimeEnd: "",
					current: 1,
					size: 5,
					status: "",
					type: "",
					descs: "createdTime",
				},

				dataAll02: {
					createdTimeStart: '',
					createdTimeEnd: '',
					current: 1,
					size: 5,
					status: '',
					descs: "createdTime"
				},

				showPaymentBox: false,
				WithdrawalMoney: "",
				showInvitation: false,
				TotalPage: 0,
				// 时间存放
				startDateValue: '',
				endDateValue: '',

				// 切换区块
				ChangeBtnCas: true,
				phonewit: true

			};
		},
		created() {
			this.getUserInfo();
			this.doubleChange(this.dataAll01)
		},
		computed: {
			userinfo() {
				return this.$store.state.userinfo;
			},
		},
		methods: {
			// pc element ui时间参数更新
			UpdateDate(value) {
				if (value == null) {
					this.startDateValue = ''
					this.endDateValue = ''
				} else {
					this.startDateValue = this.$tool.timeFormat(new Date(this.value2[0]).valueOf())
					this.endDateValue = this.$tool.timeFormat(new Date(this.value2[1]).valueOf())

				}
				console.log(this.startDateValue)
				console.log(this.endDateValue)
			},
			// 移动端 vant 搜索
			vantcalenderChange(value) {
				if (value[0] == null || value[1] == null) {
					this.startDateValue = ''
					this.endDateValue = ''
				} else {
					this.startDateValue = this.$tool.timeFormat(new Date(value[0]).valueOf())
					this.endDateValue = this.$tool.timeFormat(new Date(value[1]).valueOf())
					console.log(this.startDateValue)
					console.log(this.endDateValue)
				}
			},




			showPaymentBoxHandler() {
				if (!this.userinfo.paypal) {
					this.showToast('set paypal email', 'PayPalの電子メールの設定')
					return this.$router.push("/accountSettings");
				}
				this.showPaymentBox = true;
			},


			WithdrawHandler() {
				console.log(this.WithdrawalMoney - 0);
				console.log(this.userinfo.payableAmount - 0);
				if (this.WithdrawalMoney - 0 > this.userinfo.payableAmount - 0 || this.WithdrawalMoney <= 0) {

					return this.showToast(
						"Please enter the correct amount",
						"正しい金額を入力してください"
					);
				}
				this.$axios({
					url: "user/siteUserWithdrawalsRecord/applyWithdrawals",
					params: {
						amount: this.WithdrawalMoney,
					},
				}).then((res) => {
					if (res.data) {
						this.showInvitation = true;
						this.showPaymentBox = false;
						this.getUserInfo();
						this.showToast(
							"Successful withdrawals",
							"現金引き出し成功",
							"success"
						);
					}
				});
			},
			getUserInfo() {
				let token = this.$store.state.token;
				this.$axios({
					url: "/user/siteUser/info",
					headers: {
						Authorization: "Bearer " + token,
					},
				}).then((res) => {
					this.$store.commit("SET_USERINFO", res.data);
				});
			},
			change() {
				console.log(this.names);
			},
			rewardPointsChange() {
				this.$router.push("/rewardPoints");
			},

			// vant 日期
			formatDate(date) {
				return `${date.getMonth() + 1}/${date.getDate()}`;
			},
			onConfirm(date) {
				const [start, end] = date;
				this.show = false;
				this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;

				// console.log('s')
				this.AllpayableChange(50)
			},


			//  CashbackChange切换
			CashbackChange1(num) {
				this.IFTab = 1
				this.numCas = num;
				this.isCashbackChange = true
				this.phonewit = true
				this.doubleChange(this.dataAll01);
			},
			CashbackChange2(num) {
				this.IFTab = 6
				this.numCas = num;
				this.isCashbackChange = false
				this.phonewit = false
				this.getWithdrawRecords(this.dataAll01);
				// this.
			},
			// TransactionChnage是否显示
			TransactionChnage() {
				this.isTransactionChnage = !this.isTransactionChnage;
			},
			// 提示框
			btnFirstChange() {
				this.IsbtnFirstChange = !this.IsbtnFirstChange;
			},
			btnFirstChange2() {
				this.IsbtnFirstChange2 = !this.IsbtnFirstChange2;
			},
			// pc端的提示框
			btnFirstChange3() {
				this.IsbtnFirstChange3 = true;
			},
			btnFirstChange4() {
				this.IsbtnFirstChange3 = false;
			},

			// 交易记录是否成功
			withdrawalChange(num) {
				this.isShowNum = 1
				this.ChangeBtnCas = true
				this.dataAll01.createdTimeStart = "";
				this.dataAll01.createdTimeEnd = "";
				this.dataAll01.status = "";
				// this.dataAll01.type = ''
				this.dataAll01.descs = "createdTime";

				this.doubleChange(this.dataAll01);


				this.csahbackIsshow = num
				this.balanceIsShow = false;
			},
			AllChange(num) {
				this.isShowNum = 6
				this.ChangeBtnCas = false
				this.csahbackIsshow = num
				this.balanceIsShow = true;
				this.dataAll01.status = ''
				this.getWithdrawRecords()

			},
			// this.axios 封装参数的接收
			// 商品记录
			doubleChange(obj1) {
				this.$loading();
				this.$axios({
					url: "user/siteUserCashbackRecord/siteUserCashbackRecords",
					method: "get",
					params: {
						...obj1,
						// descs:'createdTime'
					},
				}).then((res) => {
					console.log(res);
					this.shopRecords = res.data.records;
					this.TotalPage = res.data.pages;
				});
			},


			//获取提现记录
			getWithdrawRecords() {
				this.$loading();
				this.$axios({
					url: "user/siteUserWithdrawalsRecord/siteUserWithdrawalsRecords",
					method: "get",
					params: {
						...this.dataAll01
					},
				}).then((res) => {
					console.log(res);
					this.shopRecords = res.data.records;
					this.TotalPage = res.data.pages;
				});
			},

			// 全部记录切换
			AllpayableChange(e) {
				switch (e) {
					case 1:
						console.log("全部");
						this.isShowNum = 1;

						this.dataAll01.createdTimeStart = this.startDateValue;
						this.dataAll01.createdTimeEnd = this.endDateValue;
						this.dataAll01.status = "";
						// this.dataAll01.type = ''
						this.dataAll01.descs = "createdTime";

						this.doubleChange(this.dataAll01);
						this.isTransactionChnage = false
						this.IFTab = 1

						break;
					case 2:
						console.log("应付");
						this.isShowNum = 2;

						this.dataAll01.createdTimeStart = this.startDateValue;
						this.dataAll01.createdTimeEnd = this.endDateValue;
						this.dataAll01.status = 3;
						// this.dataAll01.type = ''
						this.dataAll01.descs = "createdTime";

						this.doubleChange(this.dataAll01);
						this.isTransactionChnage = false
						this.IFTab = 2
						break;
					case 3:
						console.log("待处理");
						this.isShowNum = 3;

						this.dataAll01.createdTimeStart = this.startDateValue;
						this.dataAll01.createdTimeEnd = this.endDateValue;
						this.dataAll01.status = 2;
						// this.dataAll01.type = ''
						this.dataAll01.descs = "createdTime";

						this.doubleChange(this.dataAll01);
						this.isTransactionChnage = false
						this.IFTab = 3
						break;
					case 4:
						console.log("已关闭");
						this.isShowNum = 4;

						this.dataAll01.createdTimeStart = this.startDateValue;
						this.dataAll01.createdTimeEnd = this.endDateValue;
						this.dataAll01.status = 1;
						//  this.dataAll01.type = ''
						this.dataAll01.descs = "createdTime";

						this.doubleChange(this.dataAll01);
						this.isTransactionChnage = false
						this.IFTab = 4
						break;
					case 5:
						this.dataAll01.createdTimeStart = this.startDateValue
						this.dataAll01.createdTimeEnd = this.endDateValue
						this.dataAll01.descs = "createdTime";
						if (this.ChangeBtnCas) {
							this.doubleChange(this.dataAll01);
							console.log('日期搜索1')
						} else {
							this.getWithdrawRecords(this.dataAll01)
							console.log('日期搜索2')
						}


						break;
					case 6:
						this.isShowNum = 6;
						this.IFTab = 6
						this.isTransactionChnage = false
						this.dataAll01.createdTimeStart = this.startDateValue
						this.dataAll01.createdTimeEnd = this.endDateValue
						this.dataAll01.descs = "createdTime";
						this.dataAll01.type = ''
						this.dataAll01.status = ''
						this.getWithdrawRecords(this.dataAll01)
						console.log("aaa")
						break;
					case 7:
						this.isShowNum = 7;
						this.IFTab = 7
						this.isTransactionChnage = false
						this.dataAll01.createdTimeStart = this.startDateValue
						this.dataAll01.createdTimeEnd = this.endDateValue
						this.dataAll01.descs = "createdTime";
						this.dataAll01.type = ''
						this.dataAll01.status = '1,2'
						this.getWithdrawRecords(this.dataAll01)
						// console.log('ssss')
						break;
					case 8:
						this.isShowNum = 8;
						this.IFTab = 8
						this.isTransactionChnage = false
						this.dataAll01.createdTimeStart = this.startDateValue
						this.dataAll01.createdTimeEnd = this.endDateValue
						this.dataAll01.descs = "createdTime";
						this.dataAll01.type = ''
						this.dataAll01.status = '3'
						this.getWithdrawRecords(this.dataAll01)

						break;
					case 9:
						this.isShowNum = 9;
						this.IFTab = 9
						this.isTransactionChnage = false
						this.dataAll01.createdTimeStart = this.startDateValue
						this.dataAll01.createdTimeEnd = this.endDateValue
						this.dataAll01.descs = "createdTime";
						this.dataAll01.type = ''
						this.dataAll01.status = '4,5'
						this.getWithdrawRecords(this.dataAll01)
						break;
					case 10:
						this.isTransactionChnage = false
						this.dataAll01.createdTimeStart = this.startDateValue
						this.dataAll01.createdTimeEnd = this.endDateValue
						this.dataAll01.descs = "createdTime";
						this.getWithdrawRecords(this.dataAll01);
						console.log('日期搜索')
						break;
					case 50:
						this.dataAll01.createdTimeStart = this.startDateValue
						this.dataAll01.createdTimeEnd = this.endDateValue
						this.dataAll01.descs = "createdTime";
						if (this.phonewit) {
							this.doubleChange(this.dataAll01);
							console.log('日期搜索1')
						} else {
							this.getWithdrawRecords(this.dataAll01)
							console.log('日期搜索2')
						}


						break;


				}
			},



			// 活动记录
			campaignChange(e) {
				switch (e) {
					case 5:
						this.dataAll01.type = " ";
						console.log("全部");
						this.campaignNum = 5;
						this.doubleChange(this.dataAll01);
						break;
					case 6:
						console.log("应付");
						this.campaignNum = 6;
						this.dataAll01.type = 1;
						this.doubleChange(this.dataAll01);
						break;
					case 7:
						console.log("待处理");
						this.campaignNum = 7;
						this.dataAll01.type = 2;
						this.doubleChange(this.dataAll01);
						break;
					case 8:
						console.log("已关闭");
						this.campaignNum = 8;
						console.log(this.$store.state.userinfo);
						this.dataAll01.type = 3;
						this.doubleChange(this.dataAll01);
						break;
				}
			},
			Lastpage() {
				if (this.dataAll01.current <= 1) {
					return;
				}
				this.dataAll01.current--;
				this.doubleChange(this.dataAll01);
			},

			Nextpage() {
				if (this.dataAll01.current >= this.TotalPage) {
					return;
				}
				this.dataAll01.current++;
				this.doubleChange(this.dataAll01);
			},


			Lastpage01() {
				if (this.dataAll01.current <= 1) {
					return;
				}
				this.dataAll01.current--;
				this.getWithdrawRecords(this.dataAll01);
			},
			Nextpage01() {
				if (this.dataAll01.current >= this.TotalPage) {
					return;
				}
				this.dataAll01.current++;
				this.getWithdrawRecords(this.dataAll01);
			},
			goPage(url) {
				this.$router.push(url)
			}
			// 活动等状态切换
			// CampaignChange(e){
			// 	switch (e) {
			// 		case 1:
			// 			console.log("全部")
			// 			this.isShowNum = 1
			// 		break;
			// 		case 2:
			// 			console.log('应付')
			// 				this.isShowNum = 2
			// 		break
			// 		case 3:
			// 			console.log('待处理')
			// 				this.isShowNum = 3
			// 		break
			// 		case 4:
			// 			console.log('已关闭')
			// 				this.isShowNum = 4
			// 		break
			// 	}
			// }
		},
	};
</script>

<style scoped lang="scss">
	.common-page-box {
		margin-top: 20px;
		display: flex;
		justify-content: center;
		align-items: center;

		.common-page-box-num {
			font-size: .8rem;
			display: inline-block;
			margin: 0 .45rem;
			cursor: pointer;
			color: #ff5900;
		}
	}

	@media only screen and (max-width: 900px) {
		.user_balance_pc {
			display: none;
			overflow: hidden;
		}
	}

	@media only screen and (min-width: 900px) {
		.user_balance_iphone {
			display: none;
		}

		html {
			font-size: 30px;
		}

		span {
			font-weight: 400;
		}
	}

	// vant 样式
	/deep/.van-calendar__day--start {
		color: #fff;
		background: rgb(255, 89, 0);
	}

	/deep/ .van-button--danger {
		color: rgb(255, 255, 255);
		background: rgb(255, 89, 0);
		border-color: rgb(255, 89, 0);
	}

	/deep/.van-calendar__day--middle {
		color: rgb(255, 89, 0);
	}

	/deep/.van-calendar__day--end {
		color: rgb(255, 255, 255);
		background: rgb(255, 89, 0);
		border-color: rgb(255, 89, 0);
	}

	// element 样式 color: rgb(255, 89, 0)
	.el-date-picker {
		/deep/.el-date-table td.start-date span {
			background-color: red;
		}
	}

	/deep/.el-date-table td.start-date span {
		background-color: red;
	}

	.block {
		.el-date-table td.start-date span {
			background-color: orangered !important;
		}
	}

	.overFlow_routerBox_warper {
		flex: 1;
		margin-left: 20px;
	}

	.balancePage {
		color: #575556;
	}

	.balance_pc_titleBox {
		background: #fff;
	}

	.balance_pc_balanceText {
		height: 50px;
		line-height: 50px;
		font-size: 22px;
		margin-bottom: 0;
		margin-top: 0;
		border-bottom: 1px solid #efefef;
		padding-left: 30px;
		text-align: left;
	}

	.balance_pc_cashbackBox {
		display: flex;
		height: 306px;
	}

	.balance_pc_cashback {
		flex: 1;
		border-right: 1px solid #efefef;
		text-align: center;
	}

	.balance_pc_currentText {
		text-align: center;
		font-size: 20px;
		margin: 24px auto 24px;
	}

	.balance_pc_priceBox {
		display: flex;
		justify-content: center;
	}

	.balance_pc_priceBox-item {
		box-sizing: border-box;
		width: 146px;
		height: 146px;
		border: 6px solid #f0f0f0;
		border-radius: 50%;
		text-align: center;
		margin: 0 30px;
	}

	.balance_pc_txt_01 {
		font-weight: 700;
		margin-top: 38px;
		font-size: 24px;
		margin-bottom: 0;
		color: #585657;
	}

	.balance_pc_txt_02 {
		font-size: 16px;
		margin-top: 4px;
		font-weight: 400;
	}

	.balance_pc_priceBox-item2 {
		box-sizing: border-box;
		width: 146px;
		height: 146px;
		border: 6px solid #f0f0f0;
		border-radius: 50%;
		text-align: center;
		margin-left: 65px;
	}

	.reward-icon {
		width: 0.8rem;
		height: 0.8rem;
		display: inline-block;
		background: url() 0 0 no-repeat;
		position: relative;
		top: -0.1rem;
	}

	.reward-icon-text {
		line-height: 30px;
		font-size: 0.7rem !important;
		text-align: left;
		width: 13rem !important;
		position: absolute;
		left: -5rem;
		color: #838383;
		display: block;
		background-color: #f7f7f7;
		top: 1.5rem;
		padding: 0.25rem 1rem;
		border-radius: 4px;
		z-index: 10;
		font-style: normal;
		// margin: 0 1rem;
	}

	.balance_pc_priceBox_bottom_active {
		color: #fff;
		background-color: #ffaf52 !important;
		font-size: 16px;
	}

	.balance_pc_priceBox_bottom {
		background-color: rgb(203, 203, 203);
		color: rgb(255, 255, 255) !important;
		margin: 20px auto 0px;
		cursor: pointer;
		/* padding-left: 24px;
    padding-right: 24px; */
		box-sizing: border-box;
		text-align: center;
		line-height: 36px;
		width: 190px;
		height: 36px;
		font-size: 16px;
	}

	.balance_pc_priceBox_bottom_p {
		color: rgb(203, 203, 203);
		font-size: 12px;
		margin-top: 8px;
		text-align: center;
		cursor: pointer;
		display: inline-block;
		outline: none;
	}

	.balance_pc_point_warper {
		flex-basis: 284px;
	}

	.balance_pc_pointText_p {
		margin-top: 130px;
		padding: 0px 30px;
		background-color: rgb(255, 255, 255);
		font-size: 16px;
	}

	.balance_pc_redTxt {
		color: red;
		font-weight: 700;
	}

	.balance_pc_learnTxt {
		color: #ff5900;
	}

	.balance_pc_historyBox {
		margin-top: 20px;
		background: #fff;
	}

	.balance_pc_historyBox__txt {
		height: 50px;
		font-size: 20px;
		line-height: 50px;
		padding-left: 30px;
		text-align: left;
	}

	.balance_pc_historyBox-btnBox {
		padding-bottom: 10px;
		text-align: center;
	}

	.balance_pc_btn {
		display: inline-block;
		width: 100px;
		height: 32px;
		line-height: 32px;

		border: 1px solid #ff5900;
		text-align: center;
		font-size: 16px;
		margin: 0 8px;
		cursor: pointer;
		background: #ff5900;
		color: #fff;
	}

	.balance_pc_btnHover233 {
		color: #ff5900;
		border: 1px solid #ff5900;
		background: white;
	}

	.balance_pc_btnHover {
		color: #ff5900;
		border: 1px solid #ff5900;
		background: white;
	}

	.balance_pc_btnHover:hover {
		border: 1px solid #ff5900;
		background: #ff5900;
		color: #fff;
	}

	.balance_pc_stepPriceBox {
		margin: 20px 30px;
		text-align: left;
	}

	.balance_pc_commonBtn:first-child {
		margin: 0;
	}

	.balance_pc_commonBtn {
		display: inline-block;
		cursor: pointer;
		font-size: 16px;
		box-sizing: border-box;
		color: #ff5900;
		height: 32px;
		line-height: 32px;
		text-align: center;
		padding: 0 12px;
		margin: 0 8px;
		border: 1px solid #ff5900;
	}

	.balance_pc_commonBtn:hover {
		border: 1px solid #ff5900;
		background: #ff5900;
		color: #fff;
	}

	.balance_pc_reasonListBox {
		background: #fff;
		display: flex;
	}

	.balance_pc_typeBox {
		padding: 20px 30px;
		display: block;
		width: 100%;
		text-align: left;
	}

	.balance_pc_commonBtn:first-child {
		margin: 0px;
	}

	.balance_pc_commonBtn {
		display: inline-block;
		cursor: pointer;
		font-size: 16px;
		box-sizing: border-box;
		color: #ff5900;
		height: 32px;
		line-height: 32px;
		text-align: center;
		padding: 0 12px;
		margin: 0 8px;
		border: 1px solid #ff5900;
	}

	.block {
		display: inline-block;
		width: 280px;
		border-radius: 0px;
		vertical-align: 1px;
		height: 32px;
	}

	.balance_pc_searchBtn {
		background-color: #ffaf52;
		box-sizing: border-box;
		color: #fff;
		margin-left: 20px;
		height: 32px;
		line-height: 32px;
		font-size: 16px;
		display: inline-block;
		width: 74px;
		text-align: center;
		cursor: pointer;
		vertical-align: 1px;
	}

	.el-range-editor.is-active,
	.el-range-editor.is-active:hover {
		border-color: #ff5900;
	}

	/* .el-picker-panel__shortcut:hover{
  color: #ff5900;
} */

	span.el-date-editor .el-range-separator {
		padding: 0 5px;
		line-height: 22px !important;
		width: 5%;
		color: #303133;
	}

	/* .el-date-editor .el-range__icon{
    padding-bottom: 6px;
  } */
	.balance_pc_titleBox_List_bottom_warper {
		background-color: white;
	}

	.balance_pc_titleBox_List_bottom {
		background: #ffaf52;
		font-size: 18px;
		line-height: 42px;
		text-align: center;
		color: #fff;
		align-content: center;
		justify-content: center;
		display: flex;
		height: 42px;
	}

	.balance_pc_title1 {
		width: 90px;
	}

	.balance_pc_title2 {
		flex: 1;
	}

	.balance_pc_title3 {
		width: 160px;
	}

	.balance_pc_title4 {
		width: 78px;
	}

	.balance_pc_itemBox {
		display: flex;
		font-size: 14px;
		text-align: center;
		height: 30px;
		line-height: 30px;
	}

	.balance_pc_itemTxt1 {
		width: 90px;
	}

	.balance_pc_itemTxt2 {
		flex: 1;
		outline: none;
	}

	.balance_pc_moreText {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
		max-width: 400px;
		vertical-align: middle;
		outline: none;
	}

	.balance_pc_itemTxt3 {
		width: 160px;
	}

	.balance_pc_itemTxt4 {
		width: 78px;
	}

	.marginBox {
		padding: 0.5rem 0;
		background: #fff;
	}

	.commonPage_pageComponent_1T1f7 {
		height: 2rem;
		line-height: 2rem;
		width: 100%;
		background: #fff;
		white-space: nowrap;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.commonPage_preIcon_1KM76 {
		height: 1.55rem;
		width: 1.55rem;
		cursor: pointer;
	}

	.commonPage_currentBox_SOGvT {
		display: inline-block;
		max-width: 70%;
		/* overflow-x: scroll; */
	}

	.commonPage_pageText--active_Eeb4h {
		font-size: 0.8rem;
		display: inline-block;
		margin: 0 0.45rem;
		cursor: pointer;
	}

	.commonPage_pageText_3a5JB {
		font-size: 0.8rem;
		display: inline-block;
		margin: 0 0.45rem;
		cursor: pointer;
	}

	.commonPage_nextIcon_2Lq2N {
		height: 1.55rem;
		width: 1.55rem;
		cursor: pointer;
	}

	.el-date-table td.start-date span {
		background-color: #ff5900;
	}

	.balance_pc_learnTxt:hover {
		color: black;
	}

	.mainPageWarper {
		background: #f5f5f5;
		padding-bottom: calc(2.15rem + env(safe-area-inset-bottom));

		.balance {
			.main-content02 {
				padding-top: 0.5rem;
				background-color: #f5f5f5;
				padding-bottom: 0.7rem;

				.balance-content {
					padding: 0 0.6rem 1.25rem 0.6rem;

					.cash-first {
						.cash-first-ul {
							background: #fff;
							list-style: none;

							.cash-first-li {
								font-size: 0.8755rem;
								color: #ff5900;

								.cash-first-ul li {
									padding-right: 1.1rem;
								}
							}
						}
					}
				}

				.common-border-bottom {
					border-bottom: 0.05rem solid #f3f3f3;
					text-align: left;
				}

				.common-li-style {
					height: 1.8rem;
					line-height: 1.8rem;
					padding-left: 1rem;
				}

				.first-span {
					height: 1.8rem;
					line-height: 1.8rem;
					// padding-left: 1rem;
				}

				.second-span {
					float: right;
					// padding-right: 1rem;
					font-size: 12px;
				}

				.change-color {
					color: #ff5900;
				}

				.cash-first-ul li {
					padding-right: 1.1rem;
				}

				.clear {
					clear: both;
					zoom: 1;
				}

				.request {
					position: relative;
					margin-top: 0.75rem;
					margin-bottom: 0.75rem;
					font-size: 0.7005rem;
					float: right;
					box-sizing: border-box;
					color: #fff;
					width: auto;
					height: 1.8rem;
					line-height: 1.8rem;
					border-radius: 0;
					background: #cbcbcb;
					padding: 0 0.3rem;
					text-align: center;
				}

				.cash-six-li p {
					clear: both;
					font-size: 0.6rem;
					color: #ff5900;
					margin-bottom: 0.75rem;
					float: right;
				}

				.clear:after {
					content: "";
					display: block;
					clear: both;
				}
			}

			.pending-order {
				margin-top: 0.55rem;
				background-color: #fff;
				padding: 0 0.6rem 0.6rem;

				.pending-title {
					position: relative;
					font-size: 0.8755rem;
					color: #ff5900;
					height: 1.8rem;
					line-height: 1.8rem;
					margin: 0 -1.1rem;
					padding-left: 1.1rem;
				}

				.reward-icon {
					width: 0.6rem;
					height: 0.6rem;
					display: inline-block;
					background: url() 0 0 no-repeat;
					position: relative;
					top: -0.1rem;
				}

				.reward-icon-text {
					line-height: 30px;
					font-size: 14px;
					width: 223px;
					position: absolute;
					color: #838383;
					display: block;
					background-color: #f7f7f7;
					top: 1.5rem;
					right: -8.8rem;
					padding: 0.25rem 1rem;
					border-radius: 4px;
					z-index: 10;
					font-style: normal;
				}

				.pending-table-flex {
					width: 100%;
					border: 1px solid #ddd;
					border-collapse: collapse;
					border-spacing: 0;
					text-align: left;
				}

				.table-header-item:first-child {
					width: 2rem;
				}

				.table-header-item:nth-child(2) {
					width: 3rem;
				}

				.table-header-item:nth-child(3) {
					width: 7rem;
				}

				.table-header-item:nth-child(4) {
					width: 3rem;
				}

				.table-header-item {
					float: left;
					text-align: center;
					font-size: 0.6rem;
					font-weight: 400;
					border-bottom: 1px solid #ddd;
					color: #000;
					padding: 0.4rem 0;
				}
			}

			.pending-order {
				margin-top: 0.55rem;
				background-color: #fff;
				padding: 0 0.6rem 0.6rem;
			}

			.pending-title {
				position: relative;
				font-size: 0.8755rem;
				color: #ff5900;
				height: 1.8rem;
				line-height: 1.8rem;
				margin: 0 -1.1rem;
				padding-left: 1.1rem;
			}

			.pending-title>span {
				position: absolute;
				cursor: pointer;
				color: #ff5900;
				left: 8rem;
				text-decoration: underline;
			}

			.pending-table-flex {
				width: 100%;
				border: 1px solid #ddd;
				border-collapse: collapse;
				border-spacing: 0;
				text-align: left;
			}

			.flex-header {
				display: flex;
				flex-direction: row;
			}

			.table-header-item {
				flex: 1;
				text-align: center;
				font-size: 0.6rem;
				font-weight: 400;
				border-bottom: 1px solid #ddd;
				color: #000;
				padding: 0.4rem 0;
			}

			.table-header-item {
				float: left;
				text-align: center;
				font-size: 0.6rem;
				font-weight: 400;
				border-bottom: 1px solid #ddd;
				color: #000;
				padding: 0.4rem 0;
			}

			li {
				font-size: 0.7rem;
			}

			.second-span {
				font-size: 0.7rem;
			}

			.pending-title {
				text-align: left;
			}

			.pending-title>span {
				position: absolute;
				cursor: pointer;
				color: #ff5900;
				left: 8rem;
				text-decoration: underline;
			}

			.cash-second {
				padding: 0.55rem 0.75rem;
				background: #fff;
				margin-top: 0.55rem;
				font-size: 0.875rem;
			}

			.cash-second p {
				font-size: 0.8755rem;
				float: left;
				line-height: 1.3rem;
				color: #757575;
			}

			.date-icon {
				height: 1.3rem;
				float: right;
			}

			.date-icon img {
				max-width: 100%;
			}

			.cut-tab {
				width: 100%;
				height: 1.6rem;
				text-align: center;
				margin: 0.35rem auto 0;
				float: right;
			}

			.span-active {
				color: #fff;
				background: #ff5900;
			}

			.cut-tab span {
				display: inline-block;
				height: 1.6rem;
				line-height: 1.6rem;
				text-align: center;
				margin: 0 0.4rem;
				font-size: 0.74rem;
				color: #ff5900;
				padding: 0 0.4rem;
				border: 1px solid #ff5900;
			}

			.search-list {
				width: 100%;
				background: #fff;
			}

			.cash-third {
				height: 1.8rem;
				line-height: 1.8rem;
			}

			.left {
				padding-left: 0.35rem;
				color: #ff5900;
				font-size: 0.7rem;
				float: left;
			}

			.right {
				float: right;
			}

			.common-text {
				font-size: 0.7005rem;
				color: #595757;
			}

			.select-box {
				width: 7.75rem;
				height: 2rem;
				position: relative;
				font-size: 14px;
				color: #333;
			}

			.select-box {
				width: 100%;
				height: 2rem;
				line-height: 2rem;
				text-align: center;
				// color: #ff5900;

				padding-right: 0.5rem;
			}

			.select-content {
				width: 100%;
				height: 2rem;
				line-height: 2rem;
				text-align: right;
				color: #ff5900;
				padding-right: 0.5rem;
			}

			.select-arrow {
				top: 0.1rem;
			}
		}

		.search-list {
			width: 100%;
			background: #fff;
		}

		.search-box {
			height: 1.5rem;
			line-height: 2rem;
			margin: 0.2rem 0.5rem;
			padding-top: 0.2rem;
			padding-bottom: 0.5rem;
			text-align: left;
		}

		.active-type {
			// background-color: #ff5900;
			color: #ff5900;
		}

		.search-box span {
			display: inline-block;
			height: 1.2rem;
			line-height: 1.2rem;
			text-align: center;
			font-size: 0.6rem;
			border: 1px solid #ff5900;
			color: #ff5900;
			padding: 0 0.35rem;
			margin: 0 0.3rem;
		}

		.cash-list {
			padding: 0.4rem 0.3rem 0;
		}

		ul {
			list-style-image: none;
			list-style-position: outside;
			list-style-type: none;
		}

		.order-box {
			border-bottom: 1px solid #efefef;
			height: 3.5rem;
			line-height: 3.5rem;
			margin-bottom: 0.65rem;
			overflow: hidden;
		}

		.order-left {
			display: block;
			width: 2.75rem;
			height: 2.75rem;
			text-align: center;
			line-height: 2.75rem;
			background-color: #ffab1c;
			color: #fff;
			font-size: 0.7rem;
			border-radius: 50%;
			margin-left: 0.2rem;
			float: left;
		}

		.order-price {
			margin: 0;
			padding: 0;
			color: #fff;
			border: 0;
			font-size: 0.65rem;
		}

		.order-right {
			display: block;
			padding-left: 0.6rem;
			font-size: 0.8rem;
			width: 78.5%;
			float: left;
			text-align: left;
		}

		.title {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 100%;
		}

		.order-right p {
			line-height: 1rem;
			color: #757575;
			font-size: 0.7rem;
		}

		.screenshot {
			line-height: 1rem;
			color: #757575;
			font-size: 0.7rem;
		}

		.select-list {
			background-color: #f5f5f5;
		}

		.spanactive {
			color: white !important;
			background: #ff5900;
		}

		.reward-icon-text {
			line-height: 30px;
			font-size: 14px;
			text-align: left;
			width: 450px;
			position: absolute;
			color: #838383;
			display: block;
			background-color: #f7f7f7;
			top: 1.5rem;
			right: -8.8rem;
			padding: 0.25rem 1rem;
			border-radius: 4px;
			z-index: 10;
			font-style: normal;
		}

		.special-tip-::before {
			border-width: 1.8rem;
			border-bottom-color: #f7f7f7;
			top: -1.6rem;
			left: 3.45rem;
			content: " ";
			z-index: 9999;
		}

		.reward-icon-text span {
			display: block;
			margin-bottom: 0.35rem;
			line-height: 1rem;
		}

		.reward-icon-text a {
			color: #ff5900;
		}

		a {
			text-decoration: none;
		}

		.reward-icon-text233 {
			width: 0px;
			/*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
			height: 0px;
			border-bottom: 0.9rem solid #f7f7f7;
			border-left: 0.7rem solid transparent;
			/*transparent 表示透明*/
			border-right: 0.7rem solid transparent;
			position: relative;
			top: 0.6rem;
			left: -0.4rem;
		}

		a:visited {
			color: #2c3e50;
		}
	}

	.reward-icon-text244 {
		width: 0px;
		/*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
		height: 0px;
		border-bottom: 0.9rem solid #f7f7f7;
		border-left: 0.7rem solid transparent;
		/*transparent 表示透明*/
		border-right: 0.7rem solid transparent;
		position: relative;
		top: 0.6rem;
		left: -0.4rem;
	}

	.payableIsShow {
		color: white !important;
		background: #ff5900;
		border: 1px solid #ff5900;
	}

	.commonDialogSlot_deletBox_1Tm2F {
		border-radius: 0.3rem;
		background: rgb(255, 255, 255);
		width: 540px;
		height: 20%;

		@media only screen and (max-width: 900px) {
			width: 16rem;
		}
	}

	.commonDialogSlot_deletIconBox_2ErC {
		height: 1.8rem;
		position: relative;
		background: rgb(255, 89, 0);
	}

	.commonDialogSlot_deletIconBox_2ErC>i {
		position: absolute;
		width: 1.3rem;
		height: 1.3rem;
		display: block;
		right: 0.35rem;
		top: 50%;
		margin-top: -0.65rem;
		background: url(https://www.rebatest.com/pingjiayi/App/image/2_03-375.png) 0px 0px / 1.3rem 1.3rem no-repeat;
	}

	.commonDialogSlot_content_1izEx {
		font-size: 0.775rem;
		color: rgb(64, 64, 64);
		padding: 0.75rem;
	}

	.payable-title {
		width: 100%;
		display: block;
		text-align: center;
		color: #ffaf52;
		margin-bottom: 0.8rem;
	}

	.apply-body-btn {
		width: 14rem;
		height: 2rem;
		line-height: 2rem;
		text-align: center;
		margin: 1rem auto;
		color: #fff;
		background-color: #ff5900;
	}

	.showInvitation {
		display: flex;
		flex-direction: column;
		align-items: center;

		img {
			width: 16rem;

			@media only screen and (max-width: 900px) {
				width: 13rem;
			}
		}


		@media only screen and (max-width: 900px) {
			padding: 0.5rem;
		}
	}
</style>
